{% extends "base.html" %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/job_details.css') }}">

    <style>
        /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
        @media only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px) {

            /*
            Label the data
            */
            td:nth-of-type(1):before {
                content: "Creation datetime:\A";
            }

            td:nth-of-type(2):before {
                content: "Size in kilobytes:\A";
            }
            td:nth-of-type(2):after {
                content: " Kb";
            }

            td:nth-of-type(3):before {
                content: "Log link Tail:";
            }

            td:nth-of-type(4):before {
                content: "Log link ARM:";
            }

            td:nth-of-type(5):before {
                content: "Log link Full:";
            }

            td:nth-of-type(6):before {
                content: "Log link Download:";
            }
        }
    </style>
    <div class="container">
    <div class="row">
        <div class="col-12">
            <div class="table-responsive">
                <div class="jumbotron">
                    <div class="row">
                        <div class="col-sm-12  rounded text-center">
                            <img src="static/img/arm80.png" alt=""><br/>
                            <strong>Welcome to your Automatic Ripping Machine<br></strong>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <table class="table table-striped table-hover">
                            <caption>Log files in the log directory</caption>
                            <thead class="thead-dark">
                            <tr>
                                <th scope="col" style="cursor: pointer;">Log file</th>
                                <th scope="col" style="cursor: pointer;">Created Time</th>
                                <th scope="col" style="cursor: pointer;">Size(kb)</th>
                                <th scope="col" colspan="4" style="cursor: default;" class="text-center" data-sorter="false">View modes</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for file in files %}
                                <tr>
                                    <th scope="row" class="text-wrap">{{ file[0]|truncate(30, True) }}</th>
                                    <td class="text-wrap">{{ file[1] }}</td>
                                    <td>{{ file[3] }}</td>
                                    <td><a href="logs?logfile={{ file[0] }}&mode=tail">tail</a></td>
                                    <td><a href="logs?logfile={{ file[0] }}&mode=armcat">arm</a></td>
                                    <td><a href="logs?logfile={{ file[0] }}&mode=full">full</a></td>
                                    <td><a href="logreader?logfile={{ file[0] }}&mode=download">download</a></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="align-items-center mt-2">
        <div class="card mx-auto">
            <div class="card-header d-flex justify-content-center">
                <strong>View Modes</strong>
            </div>
            <div class="d-flex justify-content-center">
                <p class="p-4" style="line-height: 20pt;">
                    <strong>tail:</strong> Output to browser in real time. Similar to 'tail -f'<br/>
                    <strong>arm:</strong> Static output of just the ARM log entries<br/>
                    <strong>full:</strong> Static output of all of the log including MakeMKV and
                    HandBrake<br/>
                    <strong>download:</strong> Download the full log file<br/>
                </p>
            </div>
        </div>
    </div>

{% endblock %}
{% block footer %}{{ super() }}{% endblock %}
{% block js %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/jquery.tablesorter.js') }}"></script>

    <script>
        $(document).ready(function () {
            // call the tablesorter plugin
            $("table").tablesorter();
        });
        activeTab("viewlogs");
    </script>
{% endblock %}
